<template>
  <div class="card mb-4">
    <div class="card-content">
      <div class="content">
        {{ note.content }}
        <div class="has-text-right has-text-grey-light">
          <small>{{ characterDescription }}</small>
        </div>
      </div>
    </div>
    <footer class="card-footer">
      <RouterLink :to="`/editNote/${note.id}`" class="card-footer-item"
        >Edit</RouterLink
      >
      <a @click="modals.deleteNote = true" href="#" class="card-footer-item"
        >Delete</a
      >
    </footer>
    <ModalDeleteNote
      v-model="modals.deleteNote"
      v-if="modals.deleteNote"
      :noteId="note.id"
    />
  </div>
</template>

<script setup lang="ts">
import { useNotesStore } from '@/stores/storeNotes';
import { computed, reactive } from 'vue';
import ModalDeleteNote from './ModalDeleteNote.vue';

const noteProps = defineProps({
  note: {
    type: Object,
    required: true,
  },
});
const characterDescription = computed(() => {
  const length: number = noteProps.note.content.length;
  const description = length > 1 ? 's' : '';
  return `${length} character${description}`;
});

const notesStore = useNotesStore();

const handleDeleteClicked = (id: string) => {
  notesStore.deleteNote(id);
};

const modals = reactive({
  deleteNote: false,
});
</script>
